<template>
  <div>
  
      <el-form
        :model="giftInfoForm" 
        :rules="giftInfoFormRules" 
        ref="giftInfoFormRef"
        label-width="150px" 
      >
        <el-form-item label="礼包名称" prop="name">
          <el-input
            v-model="giftInfoForm.name"
            placeholder="请输入礼包名称"
            style="width:50%"
          ></el-input>
        </el-form-item>
        <el-form-item label="礼包类型" prop="type">
          <el-select
            :disabled="isEdit?true:false"
            v-model="giftInfoForm.type"
            placeholder="请选择"
            filterable
            clearable
            style="width:50%" 
          >
            <el-option
              v-for="item in selectData.gift_type"
              :key="item.id"
              :label="item.name"
              :value="typeof giftInfoForm.type=='string' ? item.id+'' :item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称" prop="project_id">
          <el-select
            :disabled="isEdit?true:false"
            v-model="giftInfoForm.project_id"
            placeholder="请选择"
            filterable
            clearable
            style="width:50%" 
          >
            <el-option
              v-for="item in selectData.get_project"
              :key="item.id"
              :label="item.name"
              :value="typeof giftInfoForm.project_id=='string' ? item.id+'' :item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对接方式" prop="translate_way">
          <el-select
            v-model="giftInfoForm.translate_way"
            placeholder="请选择分类"
            filterable
            clearable
            style="width:50%" 
          >   
            <el-option
              v-for="item in selectData.translate_way"
              :key="item.id"
              :label="item.name"
              :value="typeof giftInfoForm.translate_way=='string' ? item.id+'' :item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结算类型" required="" prop="clear_mode">
          <el-select
            :disabled="isEdit?true:false"
            v-model="giftInfoForm.clear_mode"
            placeholder="请选择分类"
            filterable
            clearable
            style="width:50%" 
          >   
            <el-option
              v-for="item in selectData.clear_mode"
              :key="item.id"
              :label="item.name"
              :value="typeof giftInfoForm.clear_mode=='string' ? item.id+'' :item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单用户限制发送数" prop="user_limit_num">
          <el-input
            v-model="giftInfoForm.user_limit_num"
            placeholder="请输入单用户限制发送数"
            style="width:50%"
          ></el-input>
        </el-form-item>
        <el-form-item label="项目限制发送数" prop="project_limit_num">
          <el-input
            v-model="giftInfoForm.project_limit_num"
            placeholder="请输入项目限制发送数"
            style="width:50%"
          ></el-input>
        </el-form-item>
        <el-form-item label="短信模板" prop="sms_id">
          <!-- <el-input
            v-model="giftInfoForm.messid"
            placeholder="请输入或搜索短信模板ID"
            style="width:30%"
          ></el-input> -->
          <el-select
            v-model="giftInfoForm.sms_id"
            placeholder="请选择或搜索短信模板ID"
            filterable
            clearable
            style="width:50%"
          >
            <el-option
              v-for="item in selectData.sms"
              :key="item.id"
              :label="item.name"
              :value="typeof giftInfoForm.sms_id=='string' ? item.id+'' :item.id"
            >
            </el-option>
          </el-select> 
        </el-form-item>
        <el-form-item label="短信内容" prop="sms_content">
          <el-input
            disabled
            v-model="giftInfoForm.sms_content"
            placeholder="请选择短信模板"
            style="width:50%"
          ></el-input>
        </el-form-item> 
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            v-model="giftInfoForm.remark"
            placeholder="请输入备注"
            show-word-limit
            maxlength="500"
            style="width:50%"
          ></el-input>
        </el-form-item>
      </el-form> 
   
  </div>
</template>

<script> 
export default {
  props: { 
    giftInfo: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
 
  data() {
    return { 
      isEdit:false,   // 是否是编辑状态  
      giftInfoForm: {  // 礼包基本信息
        name: '',
        type: '',
        project_id: '',
        translate_way: '',
        clear_mode: '',
        user_limit_num: 0,
        project_limit_num: 0,
        sms_id: '',
        sms_content: '',
        remark: ''
      },
      selectData:{}, 
      //数据校验：
      giftInfoFormRules: {
        name: [
          { required: true, message: '请输入礼包名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择礼包类型', trigger: 'change' }],
        project_id: [{ required: true, message: '请选择项目名称', trigger: 'change' }],
        translate_way: [{ required: true, message: '请选择对接方式', trigger: 'change' }],
        clear_mode: [{ required: true, message: '请选择结算类型', trigger: 'change' }] 
      },

    }
  },
  watch: {
    giftInfoForm: {
      handler(newValue, oldValue) { 
        // console.log(oldValue) console.log(newValue)
  
        if((newValue.sms_id!=oldValue.sms_id||newValue.sms_id!='')&&(this.selectData.sms.length>0)){ 
          for(var i=0;i<this.selectData.sms.length;i++){ 
            if(newValue.sms_id==this.selectData.sms[i].id){ 
               newValue.sms_content=this.selectData.sms[i].content;
               break;
            }
          } 
        }
        
      },
      deep: true
    },
    
  },
  created() {
   
    this.getSelectData() 
    
    if(this.giftInfo){ //为编辑状态时： 
      this.giftInfoForm=JSON.parse(JSON.stringify(this.giftInfo))  
    
      if(this.giftInfo.name){
          this.isEdit=true 
            // console.log("编辑状态：")
            //   console.log(this.giftInfoForm) 
      } 
 
    }

  },
 
  methods: {
    async getSelectData() {   //获取筛选条件数据：
      const { data: res } = await this.$http.post('/admin/data/find', {
        code: 'gift_type,get_project,translate_way,clear_mode,sms'  
      })
      // 返回结果
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.selectData = res.data
 
    },
    getFinalData() {  
      this.$emit('getGiftInfo', this.giftInfoForm)
    },
     // 清空数据
    resetAllData() {
      // 清空校验
      this.$refs.giftInfoFormRef.resetFields() 
    },
    validateForm() {
      let flag = false
      this.$refs.giftInfoFormRef.validate(async (valid) => {
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    },
  }
}
</script>

<style lang="less" scoped>
 
</style>
